feat: Onboarding / Auth Flow Frontend by tars919 · Pull Request #184 · GenerateNU/selfserve

tars919 · 2026-03-17T18:57:43Z

Description

Type of Change

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Refactoring (code improvement without changing functionality)
Documentation update
Configuration/infrastructure change
Performance improvement
Test coverage improvement

Related Issue(s)

Closes #131

What Changed?

full onboarding flow with 5 steps
Shared LeftPanel component reused across all steps to keep layout consistent
All steps use mock/local data for now, no backend integration yet

Testing & Validation

How this was tested

Ran the web dev server locally
Clicked through the Employee flow and manager flow

Screenshots/Recordings

Unfinished Work & Known Issues

[x ] None, this PR is complete and production-ready
The following items are intentionally deferred:

Notes & Nuances

Pre-Merge Checklist

Code Quality

[x ] Code follows the project's style guidelines and conventions
[ x] Self-review completed (I've reviewed my own code for obvious issues)
[x ] No debugging code, console logs, or commented-out code left behind
[x ] No merge conflicts with the base branch
[x ] Meaningful commit messages that explain the "why"

Testing & CI

[x ] All CI checks are passing
[x ] All new and existing tests pass locally
[x ] Test coverage hasn't decreased (or decrease is justified)
[ x] Linting passes without errors

Documentation

[x ] Code is self-documenting or includes helpful comments for complex logic
[x ] API documentation updated (if backend endpoints changed)
[x ] Type definitions are accurate and up-to-date

Reviewer Notes

Areas needing extra attention: ...
Questions for reviewers: ...

codecov · 2026-03-17T19:00:07Z

Codecov Report

❌ Patch coverage is 0.25907% with 385 lines in your changes missing coverage. Please review.
✅ Project coverage is 4.33%. Comparing base (494d920) to head (9e654a4).
⚠️ Report is 42 commits behind head on main.

Files with missing lines	Patch %	Lines
.../src/components/onboarding/PropertyDetailsStep.tsx	0.00%	90 Missing ⚠️
...s/web/src/components/onboarding/OnboardingPage.tsx	0.00%	65 Missing ⚠️
...s/web/src/components/onboarding/InviteTeamStep.tsx	0.00%	56 Missing ⚠️
...eb/src/components/onboarding/RoleSelectionStep.tsx	0.00%	43 Missing ⚠️
...web/src/components/onboarding/EmployeeRoleStep.tsx	0.00%	37 Missing ⚠️
...s/web/src/components/onboarding/onboardingMocks.ts	0.00%	29 Missing ⚠️
...ents/web/src/components/onboarding/WelcomeStep.tsx	0.00%	24 Missing ⚠️
clients/web/src/components/onboarding/RoleCard.tsx	5.00%	19 Missing ⚠️
...lients/web/src/components/onboarding/LeftPanel.tsx	0.00%	11 Missing ⚠️
clients/web/src/routeTree.gen.ts	0.00%	7 Missing ⚠️
... and 1 more

❗ There is a different number of reports uploaded between BASE (494d920) and HEAD (9e654a4). Click for more details.

HEAD has 1 upload less than BASE

Flag BASE (494d920) HEAD (9e654a4)

mobile 1 0

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #184       +/-   ##
==========================================
- Coverage   97.29%   4.33%   -92.97%     
==========================================
  Files           1     104      +103     
  Lines          37    4939     +4902     
  Branches        9      13        +4     
==========================================
+ Hits           36     214      +178     
- Misses          1    4725     +4724

Flag	Coverage Δ
mobile	`?`
web	`4.33% <0.25%> (?)`

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
clients/web/src/routes/onboarding.tsx	`0.00% <0.00%> (ø)`
clients/web/src/routeTree.gen.ts	`0.00% <0.00%> (ø)`
...lients/web/src/components/onboarding/LeftPanel.tsx	`0.00% <0.00%> (ø)`
clients/web/src/components/onboarding/RoleCard.tsx	`5.00% <5.00%> (ø)`
...ents/web/src/components/onboarding/WelcomeStep.tsx	`0.00% <0.00%> (ø)`
...s/web/src/components/onboarding/onboardingMocks.ts	`0.00% <0.00%> (ø)`
...web/src/components/onboarding/EmployeeRoleStep.tsx	`0.00% <0.00%> (ø)`
...eb/src/components/onboarding/RoleSelectionStep.tsx	`0.00% <0.00%> (ø)`
...s/web/src/components/onboarding/InviteTeamStep.tsx	`0.00% <0.00%> (ø)`
...s/web/src/components/onboarding/OnboardingPage.tsx	`0.00% <0.00%> (ø)`
... and 1 more

... and 94 files with indirect coverage changes

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

danctila

just a couple things I noticed with the responsiveness:

we probably only really have to worry about getting down to around tablet size but either way its good to be more flexible than not

SelfServe text here is fixed:

CleanShot.2026-03-24.at.14.19.27.mp4

The outer container just shrinks width wise too much - it shouldn't be hardcoded but we ideally don't want it to stretch/shrink with each step that has different content inside:

CleanShot.2026-03-24.at.14.22.13.mp4

other things

all the components should use named exports instead of default exports
- 5 step componetns + left panel + role card + onboarding page should change
change interface Xprops to type Xprops = {...} for consitency
change the inline style={{}} props to Tailwind
- RoleCard.tsx does this correctly / uses Tailwind but isn't rendered anywhere. I think RoleSelectionStep and EmployeeRoleStep use inline styles to define this card
change the hardcoded colors to use our design tokens in styles.css

danctila

🐐 ed job implementing the changes requested 🔥

the only thing I see left is the inline styles - if you could convert them to tailwind classes that would be the last thing then this is G2G

danctila

LGTM - I would just double check with @Dao-Ho on visuals to make sure things look / feel the same as before the style replacements 👍

Dao-Ho

For sizing, use tailwind rem sizing instead of hard pixels

For colors, never use taliwind defaults or hex codes, use color variables defind in our figma and styles.css if missing, add the new colors

Dao-Ho

seems like your diffs are back, your prettier might not be using the config or these changes are left over from previous diffs.

…, responsiveness fixes, revert prettier

resolved

vercel bot deployed to Preview March 18, 2026 00:12 View deployment

vercel bot deployed to Preview March 18, 2026 00:31 View deployment

vercel bot deployed to Preview March 18, 2026 00:36 View deployment

GenerateNU deleted a comment from vercel bot Mar 24, 2026

danctila assigned tars919 Mar 24, 2026

danctila requested changes Mar 24, 2026

View reviewed changes

danctila reviewed Mar 24, 2026

View reviewed changes

Comment thread clients/web/src/components/onboarding/WelcomeStep.tsx Outdated

danctila reviewed Mar 24, 2026

View reviewed changes

Comment thread clients/web/src/components/onboarding/EmployeeRoleStep.tsx Outdated

danctila reviewed Mar 24, 2026

View reviewed changes

Comment thread clients/web/src/components/onboarding/EmployeeRoleStep.tsx

danctila reviewed Mar 24, 2026

View reviewed changes

Comment thread clients/web/src/components/onboarding/OnboardingPage.tsx Outdated

danctila added the changes requested label Mar 24, 2026

tars919 force-pushed the onboarding-lofi branch from 1081e2b to 04c8a61 Compare March 25, 2026 01:53

danctila requested changes Mar 27, 2026

View reviewed changes

danctila changed the title ~~feat: auth lo fi screens~~ feat: web onboarding Apr 1, 2026

danctila changed the title ~~feat: web onboarding~~ feat: web onboarding FE Apr 1, 2026

danctila linked an issue Apr 1, 2026 that may be closed by this pull request

feat: Onboarding / Auth Flow Frontend #131

Closed

danctila changed the title ~~feat: web onboarding FE~~ feat: Onboarding / Auth Flow Frontend Apr 1, 2026

tars919 requested a review from danctila April 4, 2026 17:02

danctila previously approved these changes Apr 4, 2026

View reviewed changes

Dao-Ho previously requested changes Apr 4, 2026

View reviewed changes

Comment thread backend/README.md Outdated

Comment thread .github/workflows/BackendCI.yaml Outdated

Comment thread backend/README.md Outdated

Comment thread clients/web/src/components/onboarding/EmployeeRoleStep.tsx Outdated

tars919 dismissed danctila’s stale review via 23947dc April 4, 2026 18:09

tars919 requested a review from Dao-Ho April 4, 2026 18:19

Dao-Ho reviewed Apr 4, 2026

View reviewed changes

Comment thread .github/workflows/BackendCI.yaml Outdated

Comment thread clients/web/src/styles.css Outdated

Comment thread clients/web/src/components/onboarding/PropertyDetailsStep.tsx

tars919 force-pushed the onboarding-lofi branch from 76f9ddf to 0bfdfb6 Compare April 15, 2026 00:21

tars919 added 5 commits April 14, 2026 21:25

feat: auth lo fi screens

f8af59b

fix: use import type for OnboardingFormData

6b7c90c

fix: run prettier on onboarding components

2615a56

fix: remove broken requests.list route blocking CI

afeb94c

fix: prettier formatting

8fe64cd

tars919 added 18 commits April 14, 2026 21:26

fix: prettier formatting

1fc2e93

fix: prettier formatting

c683e6e

final fix

ef4e3fa

fixed the responsive view on the pages

2913be6

address PR review: named exports, type props, design tokens, RoleCard…

b40ab0a

…, responsiveness fixes, revert prettier

fix import order lint errors

32bc38c

fix prettier formatting

b6c2b1f

fix: convert inline styles to Tailwind

7d62270

fix: restore prettier config and finalize onboarding styles

46cfa4a

fix: prettier formatting

646bbf5

fix: revert unintended changes to CI and README

1d8aa43

fix: remove var() syntax and use Tailwind token shorthand

ef17ff1

fix: resolve leftover merge conflict markers in mobile files

c82a0ac

fix: use main version of filters.tsx without dropdown import

c80d815

fix: restore main version of shared api client.ts

acf71fc

fix: restore main version of entire shared/src

6e5322a

fix: restore all non-onboarding files to main versions

b279764

fix: restore main versions of shared and swagger after rebase

9e654a4

tars919 force-pushed the onboarding-lofi branch from b031888 to 9e654a4 Compare April 15, 2026 01:49

danctila approved these changes Apr 16, 2026

View reviewed changes

danctila merged commit 40494c8 into main Apr 16, 2026
8 checks passed

danctila deleted the onboarding-lofi branch April 16, 2026 01:40

Conversation

tars919 commented Mar 17, 2026 • edited by danctila Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Related Issue(s)

What Changed?

Testing & Validation

How this was tested

Screenshots/Recordings

Unfinished Work & Known Issues

Notes & Nuances

Pre-Merge Checklist

Code Quality

Testing & CI

Documentation

Reviewer Notes

Uh oh!

codecov bot commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

danctila left a comment • edited by tars919 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

just a couple things I noticed with the responsiveness:

SelfServe text here is fixed:

The outer container just shrinks width wise too much - it shouldn't be hardcoded but we ideally don't want it to stretch/shrink with each step that has different content inside:

other things

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

danctila left a comment

Choose a reason for hiding this comment

Uh oh!

danctila left a comment

Choose a reason for hiding this comment

Uh oh!

Dao-Ho left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Dao-Ho left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

tars919 commented Mar 17, 2026 •

edited by danctila

Loading

codecov bot commented Mar 17, 2026 •

edited

Loading

danctila left a comment •

edited by tars919

Loading